<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Dashboard</title>
        <meta name="generator" content="Bootply"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="../resources/css/bootstrap.min.css" rel="stylesheet">
        <link href="../resources/css/dashboard.css" rel="stylesheet">
        <script type='text/javascript' src="../resources/js/jquery-2.1.1.min.js"></script>
        <script type='text/javascript' src="../resources/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="../resources/datepicker/js/bootstrap-datepicker.js"></script>
        <link href="../resources/datepicker/css/datepicker.css" rel="stylesheet"/>

        <script type="text/javascript">
            $(document).ready(
                    function() {
                        $('.datefield').datepicker({format: 'dd/mm/yyyy'});
                    }
            );
        </script>
    </head>
    <body>
        <jsp:include page="common/top-bar.jsp"/>

        <div class="container">

            <!-- upper section -->
            <div class="row">
                <div class="col-sm-3">
                    <jsp:include page="common/nav-bar.jsp"/>

                </div>
                <!-- /span-3 -->
                <div class="col-sm-9">
                    <div id="msg"></div>
                    <!-- column 2 -->
                    <h3><i class="glyphicon glyphicon-time"></i> Create Schedule</h3>

                    <hr>

                    <div class="row">
                        <form class="form-horizontal" role="form" method="post">
                            <div class="form-group">
                                <label for="ship" class="col-sm-2 control-label">Select Ship</label>
                                <div class="col-sm-10">
                                    <select class="form-control" id="ship" name="ship.id">
                                        <c:forEach var="ship" items="${shipList}">
                                            <option value="${ship.id}">${ship.name}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="departurePort" class="col-sm-2 control-label">Port of Departure</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="departurePort" name="departurePort" placeholder="Port of Departure">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="arrivalPort" class="col-sm-2 control-label">Port of Arrival</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="arrivalPort" name="arrivalPort" placeholder="Port of Arrival">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="deDate" class="col-sm-2 control-label">Departure Date</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control datefield bfh-datepicker" id="deDate" name="deDate" placeholder="Departure Date">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="arDate" class="col-sm-2 control-label">Arrival Date</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control datefield bfh-datepicker" id="arDate" name="arDate" placeholder="Arrival Date">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="distance" class="col-sm-2 control-label">Distance</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="distance" name="distance" placeholder="Distance (Kilo Meters)">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-default">Create</button>
                                </div>
                            </div>
                        </form>


                    </div>
                    <!--/col-->


                </div>
                <!--/row-->
            </div>
            <!--/col-span-9-->

        </div>
        <!--/row-->

    </div><!--/container-->
    <!-- /Main -->

</body>
</html>
